<template>
  <div class="create_form">

      <Form
        ref="createForm"
        :label-width="150"
        label-position="right"
        :model="detailData">
          <Row :gutter="20">
          <Col span="12"  style="border: none;" class="code-row-bg"
          v-for="(item,index) in detailData.formData"
          :key="index+'a'">
            <!-- :rules="item.rules"   @on-blur="blurHandle(index)"
             :rules= [{ required: true, message: item.fieldName+'不能为空', trigger: 'blur' }]"
             :rules= "item.field === 'bpmnState' ? [{required: false}]:[{ required: true, message: '请选择'+item.fieldName, trigger: 'change' }]"
             :rules="[{ required: true, message: item.fieldName+'不能为空', trigger: 'blur' }]"
            -->
              <Form-item
              :label="item.fieldName"
              :prop="'formData.' + index + '.value'"
              :rules="item.rules"
                v-if="item.type === 'input'">
                <Input
                  type="text"
                  v-model="item.value" :placeholder="item.placeholder" :disabled="item.disabled ? item.disabled :isDisabled">
                </Input>
              </Form-item>

              <Form-item
              :label="item.fieldName"
              v-if="item.type === 'select'"
              :prop="'formData.' + index + '.value'"
              :rules="item.rules"
              >
                <Select v-model="item.value" :disabled="item.disabled ? item.disabled :isDisabled" >
                  <Option v-for="item in item.optionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </Form-item>
              <Form-item :label="item.fieldName" v-if="item.type === 'date'">
                <DatePicker
                  type="date"
                  @on-change="dateHandle($event, item)"
                  :transfer="true"
                  :editable="false"
                  :clearable="true"
                  placement="bottom-end"
                  style="width: 100%;"
                  size="small"
                  :disabled="item.disabled ? item.disabled :isDisabled"
                  :placeholder="item.placeholder">
                </DatePicker>
              </Form-item>

          </Col>
          <Col span="24"
          v-for="(item,index) in detailData.formData"
          :key="index+'b'"
          style="border: none;" class="code-row-bg" >
          <Form-item :label="item.fieldName" v-if="item.type === 'textarea'"
          :prop="'formData.' + index + '.value'"
          :rules="item.rules"
          >
                <Input
                    v-if="item.type === 'textarea'"
                    type="textarea"
                    :rows="3"
                    v-model="item.value" :placeholder="item.placeholder"
                    :disabled="item.disabled ? item.disabled :isDisabled"
                    >
                  </Input>
              </Form-item>
          </Col>

        </Row>

      </Form>
    </div>

</template>

<script>

export default {
  name: "DetailForm",
  props: {
    formData: {
      type: Array,
      default: () => []
    },
    labelWidth: {
      type: Number,
      default: 112
    },
    isDisabled: {
      type: Boolean,
      default: false
    },


  },
  data() {
    return {
      detailData: {
        formData: []
      }
    }
  },

  created() {
    // console.log(this.ruleValidate)
    this.detailData.formData = JSON.parse(JSON.stringify(this.formData))
  },
  methods: {
    dateHandle(e, item) {
      item.value = e
    },
    blurHandle(index) {
      console.log('222222222', this.formData, index);
    }
  },
  watch: {
    formData: {
      handler(val) {
        this.$set(this.detailData.formData[5], 'optionList', val[5].optionList)
      },
      deep: true
    }
  }
};
</script>

<style scoped lang="less">
.create_form{
  margin: 15px 20px;

}
/deep/.ivu-input[disabled], /deep/.ivu-select-disabled .ivu-select-selection, /deep/.ivu-select-single{
  color: #666F83 !important;
}
</style>
